Einfacher Slider
Erstellen eines einfachen Sliders mit drei Bildern. Diese werden nacheinander von links eingeblendet.
<div class="simpleSlides">
<img class="slides animate-left" src= "img/yellow.jpg" alt="gelb" style="width:100%">
<img class="slides animate-left" src= "img/red.jpg" alt="rot" style="width:100%">
<img class="slides animate-left" src= "img/blue.jpg" alt="blau" style="width:100%">
</div>
// Klasse simpleSlides
//Bilder der Klassen slides und animate-left
.slides {
display: none;
width: 100%;
}
.animate-left {
display: block;
position: relative;
animation: animateleft 2s
}
@keyframes animateleft {
from { left :-1000px; opacity:0 } to { left:0; opacity:1 }
}
//Klasse Slide
// werden nicht angezeigt
//vollflächig auf der ganzen Seite
//Klasse animate-left
// über gesamte Breite des Elternelementes
//Position wird an sich ausgerichtet
//Animation von links in 2 Sekunden
//gerichtet an Bildschirmausgabe:
von links bei -1000Px und einer Deckkraft von 0 nach von links 0px und Deckkraft voll.
var simpleSlides = function () {
var i;
var slides = document.querySelectorAll (".slides");
for (i = 0; i < slides.length; i++) {
slides[i].setAttribute ("style", "display:none");
}
count++;
if (count < slides.length) { count = 1; }
slides[count-1].setAttribute ("style", "display:block");
setTimeout (simpleSlides, 3600);
}
var count = 0;
simpleSlides();
//Klasse Slide
// werden nicht angezeigt
//vollflächig auf der ganzen Seite
//Klasse animate-left
//Position wird an sich ausgerichtet
//Animation von links in 0,8 Sekunden
//gerichtet an Bildschirmausgabe:
von links bei -500Px und einer Deckkraft von 0 nach von links 0px und Deckkraft voll.